import { useDrop } from 'react-dnd';
import React, { ReactNode } from 'react';
import { Item } from '@/pages/dnd/dnd';

interface DcDropsProps {
  data: Item;
  children?: ReactNode;
  insert?: boolean;
}

export default function DcDrop(props: DcDropsProps) {
  const { children, data, insert } = props;
  const [{ isOver }, drop] = useDrop(() => ({
    item: data,
    accept: 'Item',
    collect: (monitor: any) => {
      const overId = data.id;
      const draggedId = monitor.getItem();
      return {
        isOver: draggedId !== overId && monitor.isOver({ shallow: true }),
      };
    },
    drop(dragObject, monitor) {
      const didDrop = monitor.didDrop();
      const item: Item = monitor.getItem();
      if (didDrop) {
        return undefined;
      }
      const draggedId = item.id;
      const dragParentId = item.parentId;
      const overId = data.id;
      const overParentId = data.parentId;

      if (draggedId) {
        return {
          dragItem: { draggedId, dragParentId },
          overItem: { overId, overParentId },
          insert,
        };
      }
      return { id: overId, insert };
    },
  }));

  return (
    <span ref={drop} className={'activeHover'}>
      <div
        style={{
          position: 'absolute',
          width: 858,
          height: 300,
          left: 0,
          border: '1px solid red',
        }}
      />
      {children}
    </span>
  );
}
